<template>
  <h3>child</h3>
  <p>{{ title }}</p>
  <button @click="updateTitleHandler">updateTitle</button>
  <hr />
  <input type="text" @input="inputHandler" />
  <input type="text" @input="(e) => inputHandlerByType(e, '123')" />
</template>

<script setup lang="ts">
// 0.js的写法
// defineProps({
//   title: { type: String, required: true, default: 'this is default title' }
// })
// 1.defineProps<{prop参数: prop参数类型}>()
// defineProps<{
//   title: string
// }>()
// 2.单独抽离
/* type Props = {
  title: string
}
defineProps<Props>() */
// 3.为props添加默认值
/* type Props = {
  title?: string
}
withDefaults(defineProps<Props>(), {
  title: 'this is default title'
}) */
// 4. 解构,vue3.5支持解构
type Props = {
  title?: string
}
const { title = 'this is default title123' } = defineProps<Props>()
//5. 通过类型声明定义emits类型(具名元祖)
// key:自定义事件的名称
// value: 自定义事件的参数+参数类型
// 5.1第一种写法
/* const emit = defineEmits<{
  (e: 'update-title', title: string): void
}>() */
// 5.2第二种写法
const emit = defineEmits<{
  'update-title': [title: string]
}>()

const updateTitleHandler = () => {
  emit('update-title', '子组件修改的标题')
}
// 6. 类型断言.Event
const inputHandler = (e: Event) => {
  // 添加了类型Event标注之后，可以享受类型提示，比如自动联想target
  console.dir(e.target)
  // 如果想让target元素的类型更加具体，可以使用断言，断言为具体的元素类型
  console.log((e.target as HTMLInputElement).value)
}
const inputHandlerByType = (e: Event, value: string) => {
  console.log((e.target as HTMLInputElement).value)
  console.log(value)
}
</script>

<style scoped lang="scss"></style>
